<template>
	<view class="outBox">
		<u-navbar leftText="预约座位" leftIconColor="#fff" :autoBack="true" bgColor="#242331">
			<view class="left-slot" slot="left">
				 <u-icon name="arrow-left" color="#fff"></u-icon>
				<text>我的预约</text>
			</view>
		</u-navbar>
		<view class="content" :style="{
			marginTop:barHeight + 'px',
		}">
			<view class="item" v-for="(item,index) in dataList" :key="index">
				<image class="bg" :src="baseImgUrl + 'reservation/itemBg.png'" mode=""></image>
				<view class="itemInner">
					<view class="left">
						<view class="time">
							<image :src="baseImgUrl + 'reservation/icon1.png'" mode="widthFix"></image>
							<text>{{item.createTime}}</text>
						</view>
						<view class="text">
							<text>{{item.arriveMaleNum || '-'}}人</text>
							<text>拼桌:{{item.isShareTable}}</text>
						</view>
					</view>
					<view class="right">
						<text :style="{
						color:getColor(item.bookingStatus).color
					}">{{item.bookingStatus}}</text>
					</view>

				</view>
			</view>
		<!-- 	<view class="item">
				<image class="bg" :src="baseImgUrl + 'reservation/itemBg.png'" mode=""></image>
				<view class="itemInner">
					<view class="left">
						<view class="time">
							<image :src="baseImgUrl + 'reservation/icon1.png'" mode="widthFix"></image>
							<text>05月27日 15:00</text>
						</view>
						<view class="text">
							<text>2人</text>
							<text>拼桌</text>
						</view>
					</view>
					<view class="right">
						<text :style="{
							color:getColor(1).color
						}">{{getColor(1).label}}</text>
					</view>
				</view>
			</view>
			<view class="item">
				<image class="bg" :src="baseImgUrl + 'reservation/itemBg.png'" mode=""></image>
				<view class="itemInner">
					<view class="left">
						<view class="time">
							<image :src="baseImgUrl + 'reservation/icon1.png'" mode="widthFix"></image>
							<text>05月27日 15:00</text>
						</view>
						<view class="text">
							<text>2人</text>
							<text>拼桌</text>
						</view>
					</view>
					<view class="right">
						<text :style="{
							color:getColor(4).color
						}">{{getColor(4).label}}</text>
					</view>
				</view>
			</view>
			<view class="item">
				<image class="bg" :src="baseImgUrl + 'reservation/itemBg.png'" mode=""></image>
				<view class="itemInner">
					<view class="left">
						<view class="time">
							<image :src="baseImgUrl + 'reservation/icon1.png'" mode="widthFix"></image>
							<text>05月27日 15:00</text>
						</view>
						<view class="text">
							<text>2人</text>
							<text>拼桌</text>
						</view>
					</view>
					<view class="right">
						<text :style="{
						color:getColor(2).color
					}">{{getColor(2).label}}</text>
					</view>

				</view>
			</view> -->

		</view>
	</view>
	</view>
</template>

<script>
	import {
		getWXStatusHeight
	} from '@/utils/index.js'

	import {
		findMyBookingListApi
	} from '../../api/api'
	export default {
		data() {
			return {
				// 胶囊的宽度
				barWidth: 0,
				barHeight: 0,
				dataList:[],
				baseImgUrl:this.$baseImgUrl,
			}
		},
		onLoad() {
			let obj = getWXStatusHeight()
			this.barWidth = obj.barWidth + 3
			this.barHeight = obj.barHeight + 51

			this.findMyBookingList()
		},
		methods: {
			// 获取预约列表
			async findMyBookingList() {
				const res = await findMyBookingListApi()
				console.log(res, "res");
				if(res.code == 200){
					this.dataList = res.data
				}
			},
			getColor(type) {
				if (type == 1) {
					return {
						label: "竞价中",
						color: "#00FF11"
					}
				} else if (type == 4) {
					return {
						label: "待支付",
						color: "#EA4335"
					}
				} else if (type == 2) {
					return {
						label: "竞价成功",
						color: "#EA4335"
					}
				} else {
					return {
						label: "已完成",
						color: "#B0B0B0"
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		width: 100%;
		height: 160rpx;
		position: relative;
		border-radius: 20rpx;
		overflow: hidden;
		color: #fff;
		margin-bottom: 30rpx;

		.left {
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.text {
				display: flex;
				justify-content: space-between;
			}
		}

		.right {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			flex: 1;
		}

		.itemInner {
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			padding: 20rpx 30rpx;
			display: flex;
			justify-content: space-between;
		}

		.time {
			display: flex;
			align-items: center;

			image {
				width: 30rpx;
				margin-right: 20rpx;
			}
		}

		.left,
		.right {
			position: relative;
			z-index: 9;
		}

		.bg {
			position: absolute;
			width: 100%;
			height: 100%;
		}
	}

	.content {
		position: relative;
		padding: 20rpx 40rpx;
		box-sizing: border-box;
		min-height: calc(100vh - 40rpx);
	}

	.left-slot {
		color: #fff;

		image {
			width: 40rpx;
			margin-right: 30rpx;
		}
	}

	.outBox {
		background-color: #242331;
	}
</style>
